<template>
	<view class="upload-warp">
		<view class="upload_item" v-if="add && limit>imageList.length">
			<view class="upload_add" @tap="chooseFile">+</view>
		</view>
		<view class="upload_item" v-for="(item, index) in imageList" :key="index">
			<uni-icons v-if="add" class="upload_remove" type="trash" color="#ff0000" @tap="deleteItem(index)"></uni-icons>
			<image :src="item" :data-src="item" mode="aspectFit" @tap="previewImg"></image>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		name: 'uniUpload',
		props: {
			imgList: {
				type: Array, //附件列表
				default () {
					return {}
				}
			},
			limit: {
				type: Number,
				default: 5
			},
			//是否允许新增
			add: {
				type: Boolean,
				default: true
			},
			url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				imageList: this.imgList,
				list: [] //新增文件
			};
		},
		created() {
			that = this
		},
		methods: {
			//选择文件
			chooseFile() {
				if (this.imageList.length > this.limit) {
					that.$util.showToast('超过最大限制张数')
					return;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						let tempFiles = res.tempFilePaths
						that.imageList = that.imageList.concat(tempFiles)
						if (that.imageList > that.limit) {
							that.imageList.splice(that.limit)
							that.$util.showToast('超过最大限制张数')
							return;
						}
						that.list.push(...tempFiles);
						that.$emit('update:imgList', that.imageList)
					}
				});
			},
			deleteItem(index) {
				this.imageList.splice(index, 1);
				that.$emit('update:imgList', that.imageList);
			},
			//预览
			previewImg(e) {
				uni.previewImage({
					current: e.target.dataset.src,
					loop: true,
					urls: this.imageList
				});
			},
			//上传
			upload() {
				if (this.list.length == 0) return Promise.resolve();
				return new Promise((resolve, reject) => {
					var api = `${that.$sys.getApiUrl()}${that.url}`
					let failList = [] //上传失败数据
					for (let i = 0; i < this.list.length; i++) {
						let path = this.list[i]
						let index = i.toString()
						uni.uploadFile({
							url: api,
							name: 'file',
							filePath: path, // 使用files上传数组列表,上面两者都会失效
							success: res => {
								if (res.statusCode == 200) {
									var data = JSON.parse(res.data).data
									that.list.splice(index, 1) //已经达到了数据更新的状态
									that.imageList.splice(index, 1, data)
									that.$emit('update:imgList', that.imageList);
									if (that.list.length == 0) {
										resolve(failList)
									}
								}
							},
							fail: err => {
								failList.push(path)
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.upload-warp {
		display: flex;
		flex-wrap: wrap;
	}

	.upload_item {
		position: relative;
		margin-top: 15px;
		margin-right: 15px;
		background-color: #f1f1f1;
		width: 200rpx;
		height: 200rpx;
	}

	.upload_item image {
		width: 100%;
		height: 100%;
	}

	.upload_add {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30px;
		height: 100px;
		width: 100%;
	}

	.upload_remove {
		opacity: 0.8;
		position: absolute;
		z-index: 2;
		cursor: pointer;
		box-sizing: border-box;
		right: 5px;
	}
</style>
